<template>
	<div class="setp_upload">
		<el-row :gutter="20">
			<el-col :span="2">
				<h1 class="stepIndex">{{ index + 1 }}.</h1>
			</el-col>
			<el-col :span="5">
				<!-- 5 -->
				<upload-comp
					:action="'/api/upload?type=' + url"
					:imgUrl="
						imgData.img_url ||
						'https://s1.ax1x.com/2022/05/23/XpSfTP.png'
					"
					@res-url="resurl"
				></upload-comp>
			</el-col>
			<el-col :span="16">
				<!-- 17 -->
				<div class="grid-content bg-purple-light">
					<el-input
						type="textarea"
						v-model="imgData.describe"
						:rows="8"
						placeholder="请输入内容"
					>
					</el-input>
				</div>
			</el-col>
			<el-col :span="1">
				<el-button
					type="info"
					icon="el-icon-close"
					circle
					size="mini"
					@click="remove(index)"
				></el-button>
			</el-col>
		</el-row>
	</div>
</template>

<script>
// https://s1.ax1x.com/2022/05/23/XSvGzd.png
import UploadComp from '@/components/UploadComp.vue';
export default {
	components: { UploadComp },
	props: {
		url: {
			type: String,
			default: '',
		},
		img: {
			type: String,
			default: 'https://s1.ax1x.com/2022/05/23/XSvGzd.png',
		},
		data: {
			type: Object,
			default: () => {},
		},
		index: {
			type: Number,
			default: '',
		},
	},
	data() {
		return {
			imgData: this.data,
		};
	},
	methods: {
		resurl(e) {
			// this.$emit(
			// 	'change-step',
			// 	{ ...data, imgUrl: e.resImgUrl },
			// 	this.index
			// );
			console.log(e, 'asdfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
			this.$emit('res-url', { ...e, imgUrl: e.resImgUrl }, this.index);
		},
		// 点击删除
		remove(e) {
			this.$emit('remove-step', e);
		},
	},
};
</script>

<style>
.stepIndex {
	font-size: 60px;
	text-align: center;
	line-height: 200px;
	color: #9c9c9c;
}
</style>